data:image/png;base64,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Examples of how to create image tooltips for SugarCube:
1. SugarCube's image markup: {{{[img[+5 attack|sword][Start][$sword to 1]]}}}
[img[+5 attack|sword][Start][$sword to 1]]
This will set the variable for the sword, reload the passage and show a message in a span below.
Source: [[https://www.motoslave.net/sugarcube/2/docs/#markup-image]]
<hr>
2. SugarCube's link macro: {{{<<link [img[+5 attack|sword]]>><<set $sword to 1>><<replace "#text">>You have the sword.<</replace>><</link>>}}}
<<link [img[+5 attack|sword]]>><<set $sword to 1>><<replace "#text">>You have the sword.<</replace>><</link>>
This will set the variable for the sword and show a message in a span below.
Source: [[https://www.motoslave.net/sugarcube/2/docs/#macros-macro-link]]
<hr>
3. hogart's more macro: {{{<<more "+5 attack">><<link [img[sword]]>><<set $sword to 1>><<replace "#text">>You have the sword.<</replace>><</link>><</more>>}}}
<<more "+5 attack">><<link [img[sword]]>><<set $sword to 1>><<replace "#text">>You have the sword.<</replace>><</link>><</more>>
This will set the variable for the sword and show a message in a span below. With this macro, the tooltip also works with a tap on touch screen and will try to fit the screen. The code needs to be copied to the JavaScript section. The tooltip style can be customized in the code.
Source: [[https://twine.pier17.cc/addons/more/]]
<hr>
4. Chapel's mouseover macro: {{{<<mouseover>><<link [img[sword]]>><<set $sword to 1>><<replace "#text">>You have the sword.<</replace>><</link>><span id="tooltip" class="hidden">+5 attack</span><<onmousein>><<removeclass "#tooltip" "hidden">><<addclass "#tooltip" "visible">><<onmouseout>><<removeclass "#tooltip" "visible">><<addclass "#tooltip" "hidden">><</mouseover>>}}}
<<mouseover>>\
<<link [img[sword]]>><<set $sword to 1>><<replace "#text">>You have the sword.<</replace>><</link>>\
<span id="tooltip" class="hidden">+5 attack</span>\
<<onmousein>>\
<<removeclass "#tooltip" "hidden">><<addclass "#tooltip" "visible">>\
<<onmouseout>>\
<<removeclass "#tooltip" "visible">><<addclass "#tooltip" "hidden">>\
<</mouseover>>
This will set the variable for the sword and show a message in a span below. The code needs to be copied to the JavaScript section. The tooltip is a span and can be customized in the Stylesheet.
Source: [[https://twinelab.net/custom-macros-for-sugarcube-2/#/mouseover-macro]]
<hr>
Code for then span below: {{{@@#text;<<if $sword is 1>>You have the sword.<</if>>@@}}}
@@#text;<<if $sword is 1>>You have the sword.<</if>>@@
Click here to move to the next passage and check for the sword: [[Next]]
Click here to see the tooltip CSS used for the mouseover macro: [[CSS]]<<if $sword is 1>>You have the sword.<<else>>You don't have the sword.<</if>>{{{#tooltip.hidden {
display: none;
}
#tooltip.visible {
border: 1px solid #666;
border-radius: 10px;
background-color: #e5e5f5;
color: black;
padding: 3px;
}}}}
[[Back|Start]]